<template>
    <div>
        <h3>添加菜谱</h3>
        食谱标题
        <input type="text" v-model="info.name">
        类型
        <select v-model="info.typeid">
            <option value="">请选择</option>
            <option v-for="item in Bang" :value="item.caseTypeId">{{ item.caseTypeName }}</option>
        </select>
        <input type="button" value="查询" class="btn btn-success" @click="ShowCase">
        <table class="table table-bordered">
            <tbody>
                <tr class="bg-primary">
                    <td>菜谱标题</td>
                    <td>分类</td>
                    <td>标签</td>
                    <td>菜谱图片</td>
                    <td>状态</td>
                    <td>发布时间</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in list" :key="item.caseId">
                    <td>{{ item.caseName }}</td>
                    <td>{{ item.caseTypeName }}</td>
                    <td>{{ item.caseBard }}</td>
                    <td>
                        <img :src="item.caseImg" width="50" height="50">
                    </td>
                    <td>{{ item.caseState == 0 ? "未发布" : "已发布" }}</td>
                    <td>{{ item.caseTime.substr(0, 10) }}</td>
                    <td>
                        <input type="button" value="编辑" class="btn btn-success">
                        <input type="button" value="删除" class="btn btn-danger">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import moment from 'moment';
const router = useRouter()
const route = useRoute()
onMounted(() => {
    BangType();
    ShowCase();
})
//绑定下拉框
let Bang: any = ref([])
const BangType = () => {
    axios({
        url: '/api/Emp/BangCaseType',
        method: 'get',
    })
        .then((res) => {
            console.log(res);
            Bang.value = res.data
        })
        .catch((err) => {
            console.log(err);

        })
}
//查询参数
let info: any = reactive({
    name: '',
    typeid: ''
})
//定义后端接收
let list: any = ref([])
const ShowCase = () => {
    axios({
        url: '/api/Emp/ShowCaseTypeDTO',
        method: 'get',
        params: info
    })
        .then((res) => {
            console.log(res);
            list.value = res.data
        })
        .catch((err) => {
            console.log(err);

        })
}
</script>

<style scoped></style>